<template>
  <div class="top-bar bg-color-1">
    <!--图标logo-->
    <div class="logo cursor">
      <img class="logo-img" :src="require('../assets/logo.png')">
      <p>vue云音乐</p>
    </div>
    <!--选项卡文字-->
    <div class="text-table">
      <div class="text-table-box cursor" v-for="(item,index) in tableTexts" :key="index"
           :style="index == nowMouseTable?{backgroundColor:'#32495DFF'}:{}" @mouseover="onmouseoverTable(index)" @mouseout="onmouseoutTable">
        <div class="texts"
             :style="index == nowSelectTable?{backgroundColor:'#32495DFF'}:{}" @click="clickTable(index)">
          <p class="texts-t" :style="index == nowSelectTable?{color:'#fff'}:{}">{{ item }}</p>
        </div>
      </div>
    </div>
    <!--搜索框-->
    <div class="search">
      <img style="height: 25px;width: 25px;margin-left: 5px" :src="require('../assets/search.png')">
      <input class="search-input" type="search">
    </div>
    <!--创作者中心-->
    <button class="to-creator-center cursor">
      创作者中心
    </button>
    <!--用户头像-->
    <div class="user-head cursor">
      <img class="head-img" :src="require('../assets/logo.png')">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
    tableTexts:Array
  },
  data() {
    return {
      nowSelectTable: 0,
      nowMouseTable: -1
    }
  },
  methods: {
    onmouseoverTable(index) {
      this.nowMouseTable = index
    },
    clickTable(index){
      this.nowSelectTable = index
      this.$emit("clickTable",this.nowSelectTable)
    },
    onmouseoutTable(){
      this.nowMouseTable = -1;
    }
  },
  name: "top-bar"
}
</script>

<style scoped>
.top-bar {
  width: 100%;
  height: 60px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

/*  position: absolute;
  top:0;*/
}

.logo {
  height: 100%;
  display: flex;
  flex-direction: row;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  margin-right: 20px;
}

.logo-img {
  height: 100%;
  width: auto;
}

.text-table {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-items: center;
  align-content: center;
}

.text-table-box {
  height: 100%;
}

.texts {
  height: 100%;
  padding: 0 1.25rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.texts-t {
  color: #cccccc;
  font-size: 0.875rem;
}

.search {
  height: 30px;
  margin-left: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-radius: 50px;
}

.search-input {
  border: none;
  outline: medium;
  width: 150px;
  height: 100%;
  border-radius: 50px;
}

.to-creator-center {
  width: 100px;
  height: 30px;
  margin-left: 20px;
  border-radius: 50px;
  background-color: #242424;
  color: #cccccc;
  font-size: 12px;
  border: 1px #cccccc solid;
}

.user-head {
  height: 30px;
  width: 30px;
  margin-left: 20px;
  overflow: hidden;
  border-radius: 15px;
}

.head-img {
  height: 100%;
  width: 100%;
}
</style>